// shallowReactive(浅劫持，浅监视，浅响应式数据) 与 reactive（深）

// 定义一个reactiveHandler处理对象
const reactiveHandler = {
        // 获取属性值
        get(target, prop) {
            const result = Reflect.get(target, prop)
            console.log('拦截了读取数据', prop, result)
            return result
        },
        // 修改属性值或者添加属性
        set(target, prop, value) {
            const result = Reflect.set(target, prop, value)
            console.log('拦截了修改数据或者是添加属性', prop, value);
            return result
        },
        // 删除某个属性
        deleteProperty(target, prop) {
            const result = Reflect.deleteProperty(target, prop)
            console.log('拦截了删除数据', prop);
            return result
        }
    }
    // 定义一个shallowReactive函数，传入一个目标对象
function shallowReactive(target) {
    // 判断当前目标对象是不是object类型（对象/数组）
    if (target && typeof target === 'object') {
        return new Proxy(target, reactiveHandler)
    }
    // 如果传入的数据是基本类型的数据，那么就直接返回
    return target
}

// 定义一个reactive函数，传入一个目标对象
function reactive(target) {
    // 判断当前目标对象是不是object类型（对象/数组）
    if (target && typeof target === 'object') {
        // 对数组或者对象中所有的数据进行reactive的递归处理
        // 先判断当前的数据是不是数组
        if (Array.isArray(target)) {
            // 数组的数据进行遍历操作
            target.forEach((item, index) => {
                target[index] = reactive(item)
            })
        } else {
            // 再判断当前的数据是不是对象
            Object.keys(target).forEach(key => {
                target[key] = reactive(target[key])
            })
        }

        return new Proxy(target, reactiveHandler)
    }
    // 如果传入的数据是基本类型的数据，那么就直接返回
    return target
}

// ========================================================
// 定义了一个readonlyHandler处理器
const readonlyHandler = {
        get(target, prop) {
            const result = Reflect.get(target, prop)
            console.log('拦截到了读取数据了', prop, result);
            return result
        },
        set(target, prop, value) {
            console.warn('只能读取数据，不能修改数据或者添加数据');
            return true
        },
        deleteProperty(target, prop) {
            console.log('只能读取数据，不能删除数据');
            return true
        }
    }
    // 定义一个shallowReadonly函数
function shallowReadonly(target) {
    // 需要判断当前的数据是不是对象
    if (target && typeof target === 'object') {
        return new Proxy(target, readonlyHandler)
    }
    return target
}

// 定义一个readonly函数
function readonly(target) {
    // 需要判断当前的数据是不是对象
    if (target && typeof target === 'object') {
        // 先判断当前的数据是不是数组
        if (Array.isArray(target)) {
            // 数组的数据进行遍历操作
            target.forEach((item, index) => {
                target[index] = readonly(item)
            })
        } else {
            // 再判断当前的数据是不是对象
            Object.keys(target).forEach(key => {
                target[key] = readonly(target[key])
            })
        }
        return new Proxy(target, readonlyHandler)
    }
    // 如果不是对象或数组，直接返回
    return target
}

// 定义shallowRef
function shallowRef(target) {
    return {
        _value: target, // 用来保存数据的内部属性
        get value() {
            console.log('劫持到了读取数据');
            return this._value
        },
        set value(val) {
            this._value = val
            console.log('数据已更新, 去更新界面')
        }
    }
}

// 定义ref
function ref(target) {
    target = reactive(target)
    return {
        _value: target, // 用来保存数据的内部属性
        get value() {
            console.log('劫持到了读取数据');
            return this._value
        },
        set value(val) {
            this._value = val
            console.log('数据已更新, 去更新界面')
        }
    }
}